<script setup>
import myVideo from '@/components/Video/video.vue'
import {onBeforeUpdate, onMounted, reactive, ref} from "vue";
import {closeToast, showFailToast, showLoadingToast, showSuccessToast, showToast} from "vant";
import {getVideoLikeStatusApi, getVideoListApi} from "@/api/video";
const videoList = reactive([])
//当前播放的视频索引
const videoIndex = ref(0)
//视频是否加载完成
const isVideoLoaded = ref(false)
//当前的页数
const page = ref(1)
//每次请求的条数
const pageSize = ref(3)
//初始化
const initSwiperVideo = async () => {
  videoIndex.value = 0//初始化播放的视频索引
  isVideoLoaded.value = false//初始化视频是否加载完成
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    loadingType: 'spinner',
    duration: 0,
  })
  videoList.splice(0, videoList.length)//清空视频列表
  await getVideoList()
}
// 请求视频列表
const getVideoList = async () => {
  try {
    const params={
      page: page.value,
      limit: pageSize.value
    }
    const res= await getVideoListApi(params)
    console.log('请求视频列表', res)
    if(res.msg!== '请求成功'){
      showFailToast('请求视频列表失败')
      return
    }
    const videoListData = res.data.items
    if (videoListData.length === 0) {
      showSuccessToast('没有更多数据了')
      return
    }
    videoList.push(...videoListData)
    page.value++
  }catch (e) {
    console.log(e);
    showFailToast('请求视频列表失败')
  }
}
onMounted(() => {
  initSwiperVideo()
})
// 存储dom数组
const videoDomList = ref([])
// 存储dom的方法
const myVideoSetRef = (dom) => {
  videoDomList.value.push(dom)
}
// 每次切换时，清空dom的存储数组
onBeforeUpdate(() => {
  console.log('清空dom数组')
  // videoDomList.value = [];
});
//视频加载完成的方法
const onVideoLoaded = () => {
  console.log('视频加载完成')
  // 模拟加载时间
  setTimeout(() => {
    isVideoLoaded.value = true
    closeToast()
    // videoDomList.value[0].onPlay()
  }, 200)
}
//swipe切换
const onChange = (index) => {
  console.log('切换了----->>>>>', index)
  videoIndex.value = index
  if (index === videoList.length - 1) {
    getVideoList()
  }
};
const loading = ref(false);
// 模拟异步刷新
const onRefresh = () => {
  isVideoLoaded.value = false
  setTimeout(() => {
    page.value = 1//初始化页数
    initSwiperVideo()//初始化swiper
    showToast('刷新成功');// 显示提示
    isVideoLoaded.value = true
    loading.value = false;
  }, 1000);
};

</script>
<template>
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <van-swipe class="video-swipe" :show-indicators="false" :loop="false" style="height: calc(100vh - 50px);"
               vertical :initial-swipe="0" :duration="500" @change="onChange" :lazy-render="false">
      <van-swipe-item v-if="!isVideoLoaded"/>
      <van-swipe-item v-for="(item,index) in videoList" :key="item.id">
        <div class="video-item">
          <myVideo :videoItem="item" :ref="myVideoSetRef" @onVideoLoaded="onVideoLoaded"
                   :videoFocus="index===videoIndex"/>
        </div>
      </van-swipe-item>
    </van-swipe>
  </van-pull-refresh>
</template>

<style scoped lang="scss">
.video-swipe {
  width: 100%;
  height: calc(100vh - 50px);

  .van-swipe-item {
    width: 100%;
    height: 100%;

    .video-item {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
